<template>
  <div id="main">
    <el-button @click="handleEdit(1,form)">新建</el-button>
    <el-input
      v-model="input"
      placeholder="按关键字搜索"
      @keyup.enter="sous"
      style="width: 480px; margin: 20px"
    ></el-input>
    <el-button style="margin-left:800px;" @click="returnData">撤销</el-button>
    <el-table 
      :data="tableData" 
      style="width: 1500px"
      @selection-change="handleSelectionChange">
      <el-table-column label="编号" type="selection" width="55"> </el-table-column>
      <el-table-column label="姓名" align="center" width="180" prop="name">
      </el-table-column>
      <el-table-column label="年龄" align="center" width="180" prop="age">
      </el-table-column>
      <el-table-column label="性别" align="center" width="180" prop="sex">
      </el-table-column>
      <el-table-column label="联系电话" align="center" width="180" prop="phone">
      </el-table-column>
      <el-table-column
        label="操作地址"
        align="center"
        width="380"
        prop="address"
      >
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-button type="info" plain @click="handleDelete">批量删除</el-button>
    <el-dialog title="新增/编辑" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input
            v-model="form.name"
            autocomplete="off"
            style="width: 250px"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="form.sex" placeholder="" style="width: 250px">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input
            v-model="form.phone"
            autocomplete="off"
            style="width: 250px"
          ></el-input>
        </el-form-item>
        <el-form-item label="详细地址" :label-width="formLabelWidth">
          <el-cascader
            v-model="select"
            :options="options"
            clearable
          ></el-cascader>
          <el-input
            v-model="form.address"
            placeholder="请输入详细地址"
            style="width: 250px"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save()">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      select: [],
      tableDatas: [
        {
          id: 1,
          name: "王小虎",
          age: 18,
          sex: "女",
          phone: "135698283848",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 2,
          name: "陈陈",
          age: 18,
          sex: "女",
          phone: "135698283848",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 3,
          name: "玲玲",
          age: 18,
          sex: "女",
          phone: "135698283848",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 4,
          name: "燕燕",
          age: 18,
          sex: "女",
          phone: "135698283848",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 5,
          name: "王小虎",
          age: 18,
          sex: "女",
          phone: "135698283848",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      tableData: [],
      dialogFormVisible: false,
      form: {
        id: 0,
        name: "",
        age: 0,
        sex: "",
        phone: "",
        address: "",
      },
      formLabelWidth: "120px",
      options: [
        {
          value: "广东省",
          label: "广东省",
          children: [
            {
              value: "广州市",
              label: "广州市",
              children: [
                {
                  value: "天河区",
                  label: "天河区",
                },
                {
                  value: "从化区",
                  label: "从化区",
                },
                {
                  value: "番禺区",
                  label: "番禺区",
                },
                {
                  value: "花都区",
                  label: "花都区",
                },
                {
                  value: "越秀区",
                  label: "越秀区",
                },
                {
                  value: "海珠区",
                  label: "海珠区",
                },
              ],
            },
          ],
        },
      ],
      ids: [],
      saveData: []
    };
  },
  mounted () {
    this.tableData = window.localStorage.getItem("users")
      ? JSON.parse(localStorage.getItem("users"))
      : this.tableDatas;
    localStorage.setItem("users",JSON.stringify(this.tableData))
  },
  methods: {
    sous () {
      this.input
    },
    returnData (){
      console.log(this.saveData);
      if(this.saveData.length>0){
        this.tableData = this.saveData
        localStorage.setItem("users",JSON.stringify(this.tableData))
      }
    },
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
    },
    handleEdit(index, row) {
      this.saveData = this.tableData
      this.dialogFormVisible = true;
      console.log(index, row);
      this.form = row
    },
    handleDelete() {
      if (this.ids.length > 0) {
        this.saveData = this.tableData
        for (let i = 0; i <= this.ids.length; i++) {
          this.tableData = this.tableData.filter((item) => {
            return item.id != this.ids[i];
          });

          // 保存在本地
          window.sessionStorage.setItem(
            "users",
            JSON.stringify(this.tableData)
          );
        }
      }
    },
    deleteRow(index, rows) {
      this.save = this.tableData
      rows.splice(index, 1);
      localStorage.setItem("users",JSON.stringify(this.tableData))
    },
    save() {
      if (this.form.id == 0) {
        this.save = this.tableData
        let address = "";
        for (let i = 0; i < this.select.length; i++) {
          address = address + this.select[i];
        }
        this.dialogFormVisible = false;
        this.form.id = this.tableData.length;
        this.form.address = address + this.form.address;
        this.tableData.push(this.form);
        localStorage.setItem("users",JSON.stringify(this.tableData))
      } else {
        this.save = this.tableData
        let address = "";
        for (let i = 0; i < this.select.length; i++) {
          address = address + this.select[i];
        }
        this.dialogFormVisible = false;
        this.form.address = address + this.form.address;
        this.tableData[this.form.id-1].id=this.form.id
        this.tableData[this.form.id-1].name=this.form.name
        this.tableData[this.form.id-1].sex=this.form.sex
        this.tableData[this.form.id-1].phone=this.form.phone
        this.tableData[this.form.id-1].address=this.form.address
        localStorage.setItem("users",JSON.stringify(this.tableData))
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
